<template>
  <div class="m-warehouse">
    <div class="form_group">
      <el-input
        placeholder="请输入内容"
        suffix-icon="el-icon-search"
        v-model="state.input1"
        style="width: 150px"
        size="mini"
      >
      </el-input>
      <el-cascader
        size="mini"
        style="marginLeft:15px;"
        :options="state.options"
        :props="{ checkStrictly: true }"
        clearable
      >
      </el-cascader>
    </div>
    <div class="table_group">
      <el-table
        :row-style="{ height: '40px' }"
        header-row-style="{height: '10px'}"
        :data="state.tableGroup"
        style="width: 100%"
      >
        <el-table-column
          v-for="item in state.tableGroupClos"
          :prop="item.props"
          :key="item.index"
          :label="item.label"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template #header>
            操作&nbsp;&nbsp;<i class="el-icon-s-operation"></i>
          </template>
          <slot name="icon">
            <i class="el-icon-house" @click="house"></i>
            <i class="el-icon-truck" @click="truck"></i>
          </slot>
        </el-table-column>
      </el-table>
    </div>
    <div class="page_group"></div>
  </div>
</template>

<script>
import { reactive } from "vue";
import {useRouter} from "vue-router";
export default {
  setup() {
    let state = reactive({
      input1: "",
      options: [
        {
          label: "项目一",
          value: 1,
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
            },
          ],
        },
        {
          label: "项目二",
          value: 1,
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
            },
          ],
        },
      ],
      tableGroup: [
          {
              name:"66"
          }
      ],
      tableGroupClos: [
        {
          props: "name",
          label: "仓库编号",
        },
        {
          props: "",
          label: "仓库编码",
        },
        {
          props: "",
          label: "仓库名称",
        },
        {
          props: "",
          label: "行政区",
        },
        {
          props: "",
          label: "地址",
        },
        {
          props: "",
          label: "联系人",
        },
        {
          props: "",
          label: "联系方式",
        },
        {
          props: "",
          label: "服务品牌",
        },
        {
          props: "",
          label: "服务门店",
        },
        {
          props: "",
          label: "仓库商品",
        },
        {
          props: "",
          label: "仓库规则",
        },
        {
          props: "",
          label: "运费规则",
        },
      ],
    });
    //挂在路由
    const router = useRouter();
    
    //仓费规则
    function house(){
      router.push('./storagefeerules');
    }
    //运费规则
    function truck(){
      router.push('./freightrules');
    }
    return {
      state,
      house,
      truck
    };
  },
};
</script>

<style></style>
